chore: update generator to use Griffel #21390

layershifter · 2022-01-24T14:37:37Z

PR changes

This PR updates create-package script & templates and Nx generator use Griffel packages.
Changes that are applied to generator are matching changes in #21360.

Note: This PR does not implement migration from make-styles to Griffel.

layershifter · 2022-01-24T14:39:21Z

scripts/create-package/plopfile.ts

@@ -16,7 +16,7 @@ const v8ReferencePackages = {
  node: ['codemods'],
 };
 const convergedReferencePackages = {
-  react: ['react-menu'],
+  react: ['react-provider'],


Currently only @fluentui/react-provider is using Griffel packages (#21360). As this script pickups versions from a package.json I switched it to use different package as a source.

oh didnt know we have thing like this, nx migration is run after the plop anyways, so it should be always up to date to latest setup

layershifter · 2022-01-24T14:40:11Z

scripts/create-package/plop-templates-react/package.json.hbs

-    "@fluentui/babel-make-styles": "",
    "@fluentui/eslint-plugin": "",
-    "@fluentui/jest-serializer-make-styles": "",


@fluentui/babel-make-styles & @fluentui/jest-serializer-make-styles are defined on root package.json as now they are third party devDependencies.

layershifter · 2022-01-24T14:40:40Z

tools/generators/migrate-converged-pkg/index.spec.ts

@@ -326,7 +326,6 @@ describe('migrate-converged-pkg generator', () => {
      expect(rootTsConfig.compilerOptions.paths).toEqual(
        expect.objectContaining({
          '@proj/react-dummy': ['packages/react-dummy/src/index.ts'],
-          '@proj/react-make-styles': ['packages/react-make-styles/src/index.ts'],


This package will be removed soon.

layershifter · 2022-01-24T14:41:42Z

tools/generators/migrate-converged-pkg/index.spec.ts

      });
-      expect(devDeps[babelMakeStylesPkg]).toBe('9.0.0-alpha.0');


We don't need to have Babel plugin in devDependencies of the package, that's why tests were trimmed a lot 🐱

codesandbox-ci · 2022-01-24T14:43:24Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a8551c9:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

layershifter · 2022-01-24T14:44:07Z

tools/generators/migrate-converged-pkg/index.ts

-  }
+  const shouldAddGriffelPreset = pkgJson.dependencies['@griffel/react'];
+  const extraPresets = shouldAddGriffelPreset ? ['@griffel'] : [];
+  const config = templates.babelConfig({ extraPresets });


There is no need to add Babel plugin to devDependencies, this simplifies this part a lot.

fabricteam · 2022-01-24T14:45:01Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`54.694 kB` `17.486 kB`
`react-avatar` Avatar	`43.858 kB` `12.488 kB`
`react-badge` Badge	`24.258 kB` `7.128 kB`
`react-badge` CounterBadge	`25.126 kB` `7.429 kB`
`react-badge` PresenceBadge	`22.314 kB` `6.544 kB`
`react-button` Button	`28.265 kB` `8.113 kB`
`react-button` CompoundButton	`33.562 kB` `9.074 kB`
`react-button` MenuButton	`29.92 kB` `8.69 kB`
`react-button` SplitButton	`36.006 kB` `9.757 kB`
`react-button` ToggleButton	`37.502 kB` `8.711 kB`
`react-card` Card - All	`48.475 kB` `14.343 kB`
`react-card` Card	`43.984 kB` `13.191 kB`
`react-card` CardFooter	`7.686 kB` `3.254 kB`
`react-card` CardHeader	`8.953 kB` `3.693 kB`
`react-card` CardPreview	`7.879 kB` `3.381 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.07 kB` `47.044 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.489 kB` `10.636 kB`
`react-divider` Divider	`15.337 kB` `5.544 kB`
`react-image` Image	`10.143 kB` `3.969 kB`
`react-input` Input	`21.542 kB` `7.139 kB`
`react-label` Label	`8.391 kB` `3.5 kB`
`react-link` Link	`11.14 kB` `4.521 kB`
`react-make-styles` makeStaticStyles (runtime)	`8.161 kB` `3.564 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`19.554 kB` `7.446 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.793 kB` `1.267 kB`
`react-menu` Menu (including children components)	`102.961 kB` `31.798 kB`
`react-menu` Menu (including selectable components)	`105.212 kB` `32.153 kB`
`react-popover` Popover	`95.29 kB` `28.991 kB`
`react-portal` Portal	`6.249 kB` `2.163 kB`
`react-positioning` usePopper	`22.808 kB` `7.935 kB`
`react-provider` FluentProvider	`13.972 kB` `5.237 kB`
`react-slider` Slider	`22.922 kB` `7.748 kB`
`react-switch` Switch	`25.383 kB` `8.204 kB`
`react-text` Text - Default	`10.837 kB` `4.248 kB`
`react-text` Text - Wrappers	`14.139 kB` `4.589 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-tooltip` Tooltip	`44.973 kB` `15.628 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 706305303fcf03a82052c0a9e74d8aecb102885e}

layershifter · 2022-01-24T14:50:37Z

packages/react-provider/package.json

@@ -34,6 +34,7 @@
    "@types/enzyme-adapter-react-16": "1.0.3",
    "@types/react": "16.9.42",
    "@types/react-dom": "16.9.10",
+    "@types/react-test-renderer": "^16.0.0",


fluentui/scripts/create-package/plopfile.ts

Lines 166 to 170 in 7063053

function replaceVersionsFromReference(

referencePackages: string[],

newPackageJson: PackageJson,

answers: Answers,

): void {

The script used for create-package reads & uses versions of dependencies, if this dependency absent it fails:

Opened for better suggestions.

can we hoist this dev dependency ?

Do you mean to move it to root package.json?

we need to move all of these devDep things to single version policy, would be nice to implement this in separate PR

I'm working on PR to hoist this to single version policy

size-auditor · 2022-01-24T14:57:26Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 706305303fcf03a82052c0a9e74d8aecb102885e (build)

fabricteam · 2022-01-24T15:14:38Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ContextualMenu	mount	16471	7534	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	786	763	5000
BaseButton	mount	809	832	5000
Breadcrumb	mount	2364	2303	1000
ButtonNext	mount	470	454	5000
Checkbox	mount	1367	1366	5000
CheckboxBase	mount	1137	1147	5000
ChoiceGroup	mount	4172	4158	5000
ComboBox	mount	866	876	1000
CommandBar	mount	9102	9142	1000
ContextualMenu	mount	16471	7534	1000	Possible regression
DefaultButton	mount	1002	1015	5000
DetailsRow	mount	3329	3308	5000
DetailsRowFast	mount	3329	3311	5000
DetailsRowNoStyles	mount	3163	3156	5000
Dialog	mount	2318	2290	1000
DocumentCardTitle	mount	180	154	1000
Dropdown	mount	2833	2856	5000
FluentProviderNext	mount	1690	1743	5000
FluentProviderWithTheme	mount	141	143	10
FluentProviderWithTheme	virtual-rerender	114	113	10
FluentProviderWithTheme	virtual-rerender-with-unmount	178	205	10
FocusTrapZone	mount	1613	1661	5000
FocusZone	mount	1612	1666	5000
IconButton	mount	1546	1537	5000
Label	mount	331	338	5000
Layer	mount	2646	2668	5000
Link	mount	431	429	5000
MakeStyles	mount	1496	1495	50000
MenuButton	mount	1294	1282	5000
MessageBar	mount	1779	1779	5000
Nav	mount	2940	2943	1000
OverflowSet	mount	993	984	5000
Panel	mount	2191	2208	1000
Persona	mount	770	758	1000
Pivot	mount	1276	1293	1000
PrimaryButton	mount	1148	1143	5000
Rating	mount	6819	6698	5000
SearchBox	mount	1201	1194	5000
Shimmer	mount	2241	2224	5000
Slider	mount	1713	1732	5000
SpinButton	mount	4502	4416	5000
Spinner	mount	407	399	5000
SplitButton	mount	2764	2771	5000
Stack	mount	466	484	5000
StackWithIntrinsicChildren	mount	1982	1994	5000
StackWithTextChildren	mount	4549	4554	5000
SwatchColorPicker	mount	10068	10090	5000
TagPicker	mount	2308	2342	5000
TeachingBubble	mount	11714	11624	5000
Text	mount	391	397	5000
TextField	mount	1236	1206	5000
ThemeProvider	mount	1066	1061	5000
ThemeProvider	virtual-rerender	554	549	5000
ThemeProvider	virtual-rerender-with-unmount	1679	1652	5000
Toggle	mount	723	742	5000
buttonNative	mount	137	142	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	168	148	1.14:1
AvatarMinimalPerf.default	184	170	1.08:1
AttachmentMinimalPerf.default	146	138	1.06:1
BoxMinimalPerf.default	314	297	1.06:1
FormMinimalPerf.default	370	349	1.06:1
ReactionMinimalPerf.default	346	326	1.06:1
SegmentMinimalPerf.default	322	305	1.06:1
ChatWithPopoverPerf.default	331	316	1.05:1
FlexMinimalPerf.default	259	249	1.04:1
HeaderSlotsPerf.default	673	647	1.04:1
AlertMinimalPerf.default	242	234	1.03:1
ButtonSlotsPerf.default	478	463	1.03:1
CardMinimalPerf.default	490	474	1.03:1
ChatDuplicateMessagesPerf.default	265	258	1.03:1
LabelMinimalPerf.default	343	332	1.03:1
CarouselMinimalPerf.default	414	407	1.02:1
ChatMinimalPerf.default	641	627	1.02:1
DropdownManyItemsPerf.default	584	572	1.02:1
GridMinimalPerf.default	296	291	1.02:1
HeaderMinimalPerf.default	328	320	1.02:1
ListMinimalPerf.default	447	440	1.02:1
MenuMinimalPerf.default	743	731	1.02:1
MenuButtonMinimalPerf.default	1454	1426	1.02:1
RefMinimalPerf.default	216	212	1.02:1
TextAreaMinimalPerf.default	445	437	1.02:1
TreeMinimalPerf.default	702	691	1.02:1
AnimationMinimalPerf.default	481	474	1.01:1
AttachmentSlotsPerf.default	934	927	1.01:1
CheckboxMinimalPerf.default	2312	2292	1.01:1
DividerMinimalPerf.default	327	325	1.01:1
ListCommonPerf.default	547	539	1.01:1
ListWith60ListItems.default	565	558	1.01:1
LoaderMinimalPerf.default	601	595	1.01:1
RosterPerf.default	1027	1021	1.01:1
PortalMinimalPerf.default	162	161	1.01:1
SliderMinimalPerf.default	1474	1462	1.01:1
CustomToolbarPrototype.default	3639	3597	1.01:1
TooltipMinimalPerf.default	904	899	1.01:1
ButtonOverridesMissPerf.default	1467	1462	1:1
DialogMinimalPerf.default	666	663	1:1
EmbedMinimalPerf.default	3521	3534	1:1
InputMinimalPerf.default	1122	1119	1:1
ItemLayoutMinimalPerf.default	1020	1015	1:1
ListNestedPerf.default	494	492	1:1
PopupMinimalPerf.default	540	539	1:1
ProviderMergeThemesPerf.default	1515	1511	1:1
ProviderMinimalPerf.default	1025	1026	1:1
StatusMinimalPerf.default	579	579	1:1
TableMinimalPerf.default	351	352	1:1
TreeWith60ListItems.default	164	164	1:1
VideoMinimalPerf.default	536	536	1:1
DatepickerMinimalPerf.default	4826	4895	0.99:1
DropdownMinimalPerf.default	2577	2604	0.99:1
LayoutMinimalPerf.default	314	317	0.99:1
RadioGroupMinimalPerf.default	390	392	0.99:1
SplitButtonMinimalPerf.default	3729	3776	0.99:1
IconMinimalPerf.default	522	529	0.99:1
TableManyItemsPerf.default	1637	1651	0.99:1
TextMinimalPerf.default	311	314	0.99:1
ToolbarMinimalPerf.default	812	818	0.99:1
SkeletonMinimalPerf.default	305	310	0.98:1
ImageMinimalPerf.default	329	340	0.97:1
AccordionMinimalPerf.default	132	138	0.96:1

Hotell · 2022-01-24T16:54:27Z

tools/generators/migrate-converged-pkg/index.ts

-  }
+  const shouldAddGriffelPreset = pkgJson.dependencies['@griffel/react'];
+  const extraPresets = shouldAddGriffelPreset ? ['@griffel'] : [];
+  const config = templates.babelConfig({ extraPresets });


Hotell · 2022-01-24T16:58:43Z

scripts/create-package/plopfile.ts

@@ -16,7 +16,7 @@ const v8ReferencePackages = {
  node: ['codemods'],
 };
 const convergedReferencePackages = {
-  react: ['react-menu'],
+  react: ['react-provider'],


oh didnt know we have thing like this, nx migration is run after the plop anyways, so it should be always up to date to latest setup

Hotell · 2022-01-24T17:19:27Z

packages/react-provider/package.json

@@ -34,6 +34,7 @@
    "@types/enzyme-adapter-react-16": "1.0.3",
    "@types/react": "16.9.42",
    "@types/react-dom": "16.9.10",
+    "@types/react-test-renderer": "^16.0.0",


I'm working on PR to hoist this to single version policy

layershifter added 2 commits January 24, 2022 15:35

chore: update generator to use Griffel

9c2fbed

Change files

a0f283f

msft-fluent-ui-bot assigned spmonahan Jan 24, 2022

layershifter added Area: Build System Fluent UI react-components (v9) labels Jan 24, 2022

layershifter unassigned spmonahan Jan 24, 2022

layershifter commented Jan 24, 2022

View reviewed changes

make version realistic

a8551c9

layershifter commented Jan 24, 2022

View reviewed changes

layershifter marked this pull request as ready for review January 24, 2022 15:17

layershifter requested review from a team as code owners January 24, 2022 15:17

layershifter requested a review from Hotell January 24, 2022 15:17

ling1726 approved these changes Jan 24, 2022

View reviewed changes

Hotell approved these changes Jan 24, 2022

View reviewed changes

layershifter merged commit 0fe5ae5 into microsoft:master Jan 24, 2022

layershifter deleted the chore/updare-generator branch January 24, 2022 19:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update generator to use Griffel #21390

chore: update generator to use Griffel #21390

layershifter commented Jan 24, 2022 •

edited

Loading

layershifter Jan 24, 2022

Hotell Jan 24, 2022

layershifter Jan 24, 2022

layershifter Jan 24, 2022

layershifter Jan 24, 2022 •

edited

Loading

codesandbox-ci bot commented Jan 24, 2022 •

edited

Loading

layershifter Jan 24, 2022

Hotell Jan 24, 2022

fabricteam commented Jan 24, 2022 •

edited

Loading

layershifter Jan 24, 2022

ling1726 Jan 24, 2022

layershifter Jan 24, 2022

Hotell Jan 24, 2022

Hotell Jan 24, 2022

Hotell Jan 24, 2022

size-auditor bot commented Jan 24, 2022

fabricteam commented Jan 24, 2022

Hotell Jan 24, 2022

Hotell Jan 24, 2022

Hotell Jan 24, 2022

		});
		expect(devDeps[babelMakeStylesPkg]).toBe('9.0.0-alpha.0');

	function replaceVersionsFromReference(
	referencePackages: string[],
	newPackageJson: PackageJson,
	answers: Answers,
	): void {

chore: update generator to use Griffel #21390

chore: update generator to use Griffel #21390

Conversation

layershifter commented Jan 24, 2022 • edited Loading

PR changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

layershifter Jan 24, 2022 • edited Loading

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabricteam commented Jan 24, 2022 • edited Loading

📊 Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

size-auditor bot commented Jan 24, 2022

Asset size changes

fabricteam commented Jan 24, 2022

Perf Analysis (@fluentui/react-northstar)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

layershifter commented Jan 24, 2022 •

edited

Loading

layershifter Jan 24, 2022 •

edited

Loading

codesandbox-ci bot commented Jan 24, 2022 •

edited

Loading

fabricteam commented Jan 24, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)